<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			 *{
			 	   padding: 0px; /*清楚所有元素的默认边框与内容距离*/
			 	   margin: 0px;  /*元素与元素的边框距离*/
			 	   list-style: none;
			   }
			  .header{
			  	  margin: 10px 0px; /*先上下，再左右*/
			  }
			  .header span{
			  	   font-family: "微软雅黑";
			  	   font-weight: bolder;  /*字体加粗*/
			  }
			
			  .btns{
			  	  border: 1px solid red;
			  	  padding: 10px 0px;  /*设置内容与边框的距离*/
			   
			  	  overflow: hidden;
			  }
			  .btns .btnleft{
			  	   float: left;
			  	   
			  } 
			 
			  .btns  button{
			  	  background-color: #58B857;
			  	  color: white;
			  	  font-size: 17px;
			  	  border: 0px;
			  	  height: 40px;
			  	  width: 90px;
			  	  border-radius: 5px;
			  }
			  .btns .btnleft button:last-child{
			  	 background-color: #DD4D45;
			  }
			   .btns .btnright{
			  	   float: right;
			  } 
			    .btns .btnright input{
			  	    width: 200px;
			  	    height: 40px;
			  	    border-radius: 5px;
			  	    border: 1px solid gray;
			  } 
		 
			   .btns .btnSeach{
			  	 	width: 60px;
			   }
			   .divTabs{
			   	  /* border: 1px solid red;*/
			   }
			  .tabs{
			  	  width: 100%;
			  	  text-align: center;
			  	  border: 0px;
			  	  border-collapse: collapse;/*设置单元格间距*/
			  }
			  .tabs tr{
			  	  line-height: 35px;
			  	  border-bottom: 1px solid black;
			  }
			  
			  .tabs tr:first-child{
			  	  border-top: 1px solid black;
			  }
			    /*排除第一个*/
			  .tabs tr:not(:first-child):hover{
			  	   background-color: #FFFAE8;
			  }
			  
			  .pages {
			  	  width: 400px;
			  	  margin: 10px auto; /* 需要设置 宽度 才有效剧中*/
			   
			  }
			  .pages ul li{
			  	  float: left;
			  	  width: 30px;
			  	  height: 30px;
			  	  border: 1px solid black; 
			  	  line-height: 30px;
			  	  text-align: center;
			  	  margin-left: 10px;
			  }
			  
		</style>
	</head>
	<body>
		<div class="header">
			<span>民主活动</span> >
			<span>主体列表</span>
		</div>
		<hr />
		<div class="btns">
			<div class="btnleft">
				<button class="btnAdd">新增主题</button>
				<button class="btnDel">批量删除</button>
			</div>
			<div class="btnright">
				<input  type="text" class="searchs"  />
				<button class="btnSeach">搜索</button>
			</div>
			
		</div>
		<div class="divTabs">
			<table class="tabs">
				<tr>
					<th><input type="checkbox" /></th>
					<th>序号</th>
					<th>主题名</th>
					<th>选项数</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1</td>
					<td>先有鸡还是先有蛋？</td>
					<td>2</td>
					<td></td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1</td>
					<td>先有鸡还是先有蛋？</td>
					<td>2</td>
					<td></td>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td>1</td>
					<td>先有鸡还是先有蛋？</td>
					<td>2</td>
					<td></td>
				</tr>
			</table>
			
		</div>
		
		<div class="pages">
			<ul>
				<li><<</li>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>>></li>
			</ul>
			
		</div>
		
	</body>
</html>
